<template>
  <div class="potentialCustomers">
    <page-header :title="'实习鉴定管理'"></page-header>
    <div class="search_area">
      <el-row>
        <el-form :form="queryForm" label-width="1rem">
          <el-col :span="8">
            <el-form-item label="客户姓名">
              <el-input type="text" v-model="queryForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户类型">
              <el-input type="text" v-model="queryForm.type"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属地区">
              <el-input type="text" v-model="queryForm.area"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24">
          <div class="btn_area">
            <el-button class="confrim">查询</el-button>
            <el-button class="cancle">重置</el-button>
            <el-button class="confrim">新增</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <table-list :fields="fields" :list="list" :pagination="pagination" :total="total" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange"></table-list>
  </div>
</template>
<script>
import tableList from '@/components/table.vue'
import pageHeader from '@/components/pageHeader.vue'
export default {
  name: 'potentialCustomers',
  components: {
    tableList,
    pageHeader
  },
  data() {
    return {
      queryForm: {
        name: '',
        area: '',
        type: ''
      },
      list: [
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        }
      ],
      fields: [
        {
          prop: 'name',
          label: '姓名',
          align: 'center'
        },
        {
          prop: 'age',
          label: '年龄',
          align: 'center'
        },
        {
          prop: 'sex',
          label: '性别',
          align: 'center'
        },
        {
          prop: 'grade',
          label: '年级',
          align: 'center'
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10
      },
      total: 100
    }
  },
  methods: {
    btnClick() {
      console.log(111);
    },
    handleSizeChange(val) {
      console.log(val);
      this.pagination.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pagination.currentPage = val;
    }
  },
  mounted() {
    
  }
}
</script>
<style scoped>
.potentialCustomers {
  background: #fff;
  overflow: hidden;
  padding-bottom: 0.15rem;
}
</style>